<template>
  <!-- Default box -->
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">{{ analyzePaperTitle }}</h3>
    </div>
    <div class="card-body">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules" v-if="isInit">
        <el-form-item label="学科" prop="subjectId">
          <el-select v-model="form.subjectId" placeholder="请选择学科" @change="chooseSubject">
            <el-option v-for="item in subjectList" :key="item.id" :label="item.sname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="stageId">
          <el-select v-model="form.stageId" placeholder="请选择阶段" :disabled="isDisable">
            <el-option v-for="item in stageList" :key="item.id" :label="item.stname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="init('form')">查看分析结果</el-button>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="checkSkill()" v-show="!isInit && isChoose">技能点分析</el-button>
      <div ref="chart" style="width: 1200px; height: 460px" v-show="!isInit && isChoose"></div>

      <el-button type="primary" @click="goback()" v-show="!isInit && !isChoose">返回</el-button>
      <div ref="chart2" style="width: 1200px; height: 460px" v-show="!isInit && !isChoose"></div>
    </div>
  </div>
  <!-- /.card-body -->
</template>
<script>
import theme from '../../assets/echarts/theme/theme.js'
export default {
  name: "AnalyzePaperMain",
  data() {
    return {
      analyzePaperTitle: "考试结果分析",
      form: {
        subjectId: "",
        stageId: "",
      },
      isDisable: true,
      subjectList: [],
      stageList: [],
      rules: {
        subjectId: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
        stageId: [{ required: true, message: "请选择阶段", trigger: "change" }],
      },
      userInfo: {},
      isInit: true,
      isChoose: true,
      chart: null,
      chart2: null,
      // echarts折线图数据
      option: {},
      option2: {},
    };
  },
  methods: {
    goback() {
      this.isChoose = true;
    },
    checkSkill() {
      this.axiosJSON
        .get(
          "/paper/analyzeSkill?subjectId=" +
          this.form.subjectId +
          "&stageId=" +
          this.form.stageId +
          "&userId=" +
          this.userInfo.id
        )
        .then((result) => {
          this.option2 = result.data;
          this.isChoose = false;
          this.initHistogram();
          this.analyzePaperTitle = "技能点分析";
          this.$message({
            type: "success",
            message: "生成结果成功",
          });
        });
    },
    init(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.axiosJSON
            .get(
              "/paper/analyzePaper?subjectId=" +
              this.form.subjectId +
              "&stageId=" +
              this.form.stageId +
              "&userId=" +
              this.userInfo.id
            )
            .then((result) => {
              this.option = result.data;
              this.initLineChart();
              this.isInit = false;
              this.analyzePaperTitle = "成绩分析";
              this.$message({
                type: "success",
                message: "生成结果成功",
              });
            });
        }
      })
    },
    // 生成折线图
    initLineChart() {
      let Echarts = require("echarts/lib/echarts");
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart, theme);
      this.chart.setOption(this.option);
    },
    // 生成柱状图
    initHistogram() {
      let Echarts = require("echarts/lib/echarts");
      //2.初始化
      this.chart2 = Echarts.init(this.$refs.chart2, theme);
      this.chart2.setOption(this.option2);
    },
    getSubjectList() {
      this.axiosJSON.post("/subject/getAllWithoutPage").then((result) => {
        this.subjectList = result.data.data;
      });
    },
    chooseSubject() {
      this.isDisable = false;
      this.axiosJSON
        .get("/stage/getAllWithSubjectID?subjectId=" + this.form.subjectId)
        .then((result) => {
          this.stageList = result.data.data;
        });
    },
  },
  mounted() {
    this.getSubjectList();
    this.userInfo = this.$store.getters.getLoginUser;
  },
};
</script>

<style>
</style>
